<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('疫情防控信息收集详情页面')" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #imgPreview {
            width: 30%;
            height: 120px;
            margin: 10px auto 0px auto;
            border: 1px solid black;
            text-align: center;
        }
        #prompt3 {
            width: 100%;
            height: 120px;
            text-align: center;
            position: relative;
        }
        #img3 {
            height: 100%;
            width: 100%;
        }
        #imgPreview1 {
            width: 30%;
            height: 120px;
            margin: 10px auto 0px auto;
            border: 1px solid black;
            text-align: center;
        }
        #prompt4 {
            width: 100%;
            height: 120px;
            text-align: center;
            position: relative;
        }

        #img4 {
            height: 100%;
            width: 100%;
        }

        #imgPreview2 {
            width: 30%;
            height: 120px;
            margin: 10px auto 0px auto;
            border: 1px solid black;
            text-align: center;
        }
        #prompt5 {
            width: 100%;
            height: 120px;
            text-align: center;
            position: relative;
        }

        #img5 {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body class="white-bg">
<div class="container" style="font-size: 16px">
    <h4 style="text-align: center; background-color: #0C72D1;  color: white; padding:10px;"><span th:text="${yqInfoCollect.userName}"></span></h4>
    <input id="yqInfoCollectId" type="hidden" th:value="${yqInfoCollect.id}"></input>
    <div th:if="${yqInfoCollect.userType eq '01'}">
        <label for="name"><em style="color: red;">*</em> 用户名</label>
        <div style="margin: 10px">
            <input type="text" name="userName" id="userName" disabled="disabled" th:value="${yqInfoCollect.userName}">
        </div>
        <label for="name"><em style="color: red;">*</em> 手机号</label>
        <div style="margin: 10px">
            <input type="text" name="phonenumber" id="phonenumber" disabled="disabled" th:value="${yqInfoCollect.phonenumber}">
        </div>
    </div>
    <label for="name"><em style="color: red;">*</em> 安康码状态</label>
    <div style="margin: 10px">
        <div th:if="${yqInfoCollect.akmStatus eq '0'}" style="color: green">绿码</div>
        <div th:if="${yqInfoCollect.akmStatus eq '1'}" style="color: red">黄码</div>
        <div th:if="${yqInfoCollect.akmStatus eq '2'}" style="color: red">红码</div>
    </div>
    <label for="name"><em style="color: red;">*</em> 安康码截图</label>
    <div style="margin: 10px">
        <div class="col-sm-8">
            <input type="hidden" name="akmPath" th:value="${yqInfoCollect.akmPath}" >
            <div id="imgPreview">
                <div id="prompt3">
                    <img src="#" id="img3" class="pic"/>
                </div>
            </div>
        </div>
    </div>
    <!--点击弹框大图展示-->
    <div class="col-sm-8" id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>

    <label for="name"><em style="color: red;">*</em> 两日内核酸检测结果</label>
    <div style="margin: 10px">
        <div th:if="${yqInfoCollect.hsResult eq '0'}" style="color: green">阴性</div>
        <div th:if="${yqInfoCollect.hsResult eq '1'}" style="color: red">阳性</div>
    </div>
    <label for="name"><em style="color: red;">*</em> 核酸检测时间</label>
    <div>
        <input type="text" disabled class="form-control" id="name" th:value="${#dates.format(yqInfoCollect.hsTime, 'yyyy-MM-dd')}"/>
    </div>
    <label for="name"><em style="color: red;">*</em> 核酸检测报告截图</label>
    <div style="margin: 10px">
        <div class="col-sm-8">
            <input type="hidden" name="xcmPath" th:field="${yqInfoCollect.hsPath}">
            <div id="imgPreview2">
                <div id="prompt5">
                    <img src="#" id="img5" class="pic"/>
                </div>
            </div>
        </div>
    </div>
    <label for="name"><em style="color: red;">*</em> 行程码显示14天未离开合肥</label>
    <div style="margin: 10px">
        <div th:if="${yqInfoCollect.xcmIsLeave eq 'Y'}" style="color: green">未离肥</div>
        <div th:if="${yqInfoCollect.xcmIsLeave eq 'N'}" style="color: red">24小时内有离肥记录</div>
        <div th:if="${yqInfoCollect.xcmIsLeave eq 'S'}" style="color: #FFA500">14天内有离肥记录，24小时内未离肥</div>
    </div>
    <label for="name"><em style="color: red;">*</em> 行程码截图</label>
    <div style="margin: 10px">
        <div class="col-sm-8">
            <input type="hidden" name="xcmPath" th:field="${yqInfoCollect.xcmPath}">
            <div id="imgPreview1">
                <div id="prompt4">
                    <img src="#" id="img4" class="pic"/>
                </div>
            </div>
        </div>
    </div>
    <label for="name"><em style="color: red;">*</em> 体温是否正常</label>
    <div style="margin: 10px">
        <div th:if="${yqInfoCollect.twIsNormal eq 'Y'}" style="color: green">正常</div>
        <div th:if="${yqInfoCollect.twIsNormal eq 'N'}" style="color: red">异常</div>
    </div>
    <label for="name">&nbsp;&nbsp; 备注</label>
    <div>
        <textarea class="form-control" disabled="disabled">[[${yqInfoCollect.twYcReason}]]</textarea>
    </div>
    <label for="name"><em style="color: red;">*</em> 审核状态</label>
    <div style="margin: 10px">
        <div th:if="${yqInfoCollect.aduitStatus eq '1'}" style="color: green">通过</div>
        <div th:if="${yqInfoCollect.aduitStatus eq '2'}" style="color: red">未通过</div>
    </div>
    <label for="name"><em style="color: red;">*</em> 审核人</label>
    <div>
        <input type="text" disabled class="form-control" id="name" th:value="${auditByName}"/>
    </div>
    <label for="name"><em style="color: red;">*</em> 审核时间</label>
    <div>
        <input type="text" disabled class="form-control" id="name" th:value="${#dates.format(yqInfoCollect.aduitTime, 'yyyy-MM-dd HH:mm')}"/>
    </div>
    <div>
        <div class="col-xs-12">
            <div style="text-align: center; margin: 5px;" id="auditYesBtn">
                <button style="width: 100%;font-size: 16px" type="button" class="btn btn-primary"  data-toggle="modal" data-target="#myModal">重新审核</button>
            </div>
        </div>
    </div>

    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">重新审核</h4>
                </div>
                <div class="modal-body">
                    <p>请重新审核当前用户</p>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-xs-6">
                            <div style="text-align: center; margin: 5px;" id="auditYesBtn">
                                <button style="width: 100%;font-size: 16px" type="button" class="btn btn-primary" onclick="auditYesBtn()">通过</button>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div style="text-align: center; margin: 5px;" id="auditNoBtn">
                                <button style="width: 100%;font-size: 16px" type="button" class="btn btn-primary" onclick="auditNoBtn()">拒绝</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    //加载图片
    $(function () {
        var imgPath3 = [[${yqInfoCollect.akmPath}]];
        var imgPath4 = [[${yqInfoCollect.xcmPath}]];
        var imgPath5 = [[${yqInfoCollect.hsPath}]];
        $("#img3").attr("src", imgPath3);
        $("#img4").attr("src", imgPath4);
        $("#img5").attr("src", imgPath5);

        $(".pic").click(function(){
            var _this = $(this);//将当前的pimg元素作为_this传入函数
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        });
    })

    //重新审核操作
    var prefix = ctx + "wxcp/epidemic/collect";
    function auditYesBtn() {
        var yqInfoCollectId = $('#yqInfoCollectId').val();
        $.modal.confirm("确定执行该操作吗？", function() {
            $.post(prefix+"/aduit/auditOperate",{id:yqInfoCollectId, auditOperate: "1"},function(result){
                if (result.code == 0) {
                    window.location.href = prefix + "/checkManage";
                }
            });
        });
    }

    function auditNoBtn() {
        var yqInfoCollectId = $('#yqInfoCollectId').val();
        $.modal.confirm("确定执行该操作吗？", function() {
            $.post(prefix+"/aduit/auditOperate",{id:yqInfoCollectId, auditOperate: "2"},function(result){
                if (result.code == 0) {
                    window.location.href = prefix + "/checkManage";
                }
            });
        });
    }

    function imgShow(outerdiv, innerdiv, bigimg, _this){
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性

        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("#bigimg").on('load',function(){
            var windowW = $(window).width();//获取当前窗口宽度
            var windowH = $(window).height();//获取当前窗口高度
            var realWidth = this.width;//获取图片真实宽度
            var realHeight = this.height;//获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if(realHeight>windowH*scale) {//判断图片高度
                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW*scale;//再对宽度进行缩放
                }
            } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
            $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        })

        $(outerdiv).click(function(){//再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }
</script>
</body>
</html>
